<template>
    <div>
        <basic-container>
            <el-row :gutter="10">
                <el-col :span="16">
                    <p>实时数据</p>
                    <avue-data-box :option="option1"></avue-data-box>
                </el-col>
                <el-col :span="8">
                    <p>待处理订单</p>
                    <avue-data-display :option="option2"></avue-data-display>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <div>月看板</div>
            <div ref="echartsRef" style="width: 100%; height: 550px"></div>
        </basic-container>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import echarts from "echarts";
export default {
    name: "Wel",
    data() {
        return {
            option1: {
                data: [
                    {
                        title: "营业额",
                        count: 12332,
                        icon: "icon-pay6zhifu",
                        color: "rgb(49, 180, 141)",
                    },
                    {
                        title: "订单数",
                        count: 33,
                        icon: "icon-rizhiguanli",
                        color: "rgb(56, 161, 242)",
                    },
                    {
                        title: "用户量",
                        count: 2223,
                        icon: "icon-yonghuguanli",
                        color: "rgb(117, 56, 199)",
                    },
                ],
            },
            option2: {
                data: [
                    {
                        count: 100,
                        title: "代发货",
                    },
                    {
                        count: "3,000",
                        title: "待收货",
                    },
                    {
                        count: "20,000",
                        title: "待评价",
                    },
                    {
                        count: "40,000",
                        title: "待退款",
                    },
                ],
            },
            echartOption: {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#999",
                        },
                    },
                },
                legend: {
                    data: ["营业额", "订单量"],
                    itemGap: 5,
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "2020-01",
                            "2020-02",
                            "2020-03",
                            "2020-04",
                            "2020-05",
                            "2020-06",
                            "2020-07",
                            "2020-08",
                            "2020-09",
                            "2020-10",
                            "2020-11",
                            "2020-12",
                        ],
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "营业额",
                        axisLabel: {
                            formatter: "{value} 元",
                        },
                    },
                    {
                        type: "value",
                        name: "订单量",
                        axisLabel: {
                            formatter: "{value} 单",
                        },
                    },
                ],
                series: [
                    {
                        name: "营业额",
                        type: "bar",
                        barWidth: 30,
                        color:"#409EFF",
                        data: [
                            1000,
                            1200,
                            1100,
                            900,
                            1100,
                            999,
                            915,
                            1100,
                            1232,
                            1145,
                            888,
                            1050,
                            1090,
                            1200,
                        ],
                    },
                    {
                        name: "订单量",
                        type: "line",
                        data: [
                            80,
                            90,
                            100,
                            123,
                            90,
                            110,
                            150,
                            190,
                            60,
                            69,
                            88,
                            134,
                        ],
                    },
                ],
            },
        };
    },
    computed: {
        ...mapGetters(["website"]),
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            let myChart = echarts.init(this.$refs.echartsRef);
            myChart.setOption(this.echartOption);
        },
    },
};
</script>

<style scoped="scoped" lang="scss">
</style>
